<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_element": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_element": "active",
      "alerts": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

    <div class="component-content">
      <div class="component-content-header">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-style1 mg-b-0">
            <li class="breadcrumb-item"><a href="#">Components</a></li>
            <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
            <li class="breadcrumb-item active" aria-current="page">Alerts</li>
          </ol>
        </nav>
        <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
      </div><!-- component-content-header -->

      <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
        <div class="content content-components">
          <div class="container">
            <!--sd-->
            <h1 class="td-title">Alerts</h1>
        <p class="td-lead">Provide contextual feedback messages for typical user actions. Read the <a href="https://getbootstrap.com/docs/4.2/components/alerts/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Default Functionality</h4>
        <p class="mg-b-30">Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes.</p>

        <div data-label="Example" class="td-example">
          <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
          </div>
          <div class="alert alert-secondary" role="alert">
            A simple secondary alert—check it out!
          </div>
          <div class="alert alert-success" role="alert">
            A simple success alert—check it out!
          </div>
          <div class="alert alert-danger" role="alert">
            A simple danger alert—check it out!
          </div>
          <div class="alert alert-warning" role="alert">
            A simple warning alert—check it out!
          </div>
          <div class="alert alert-info" role="alert">
            A simple info alert—check it out!
          </div>
          <div class="alert alert-light" role="alert">
            A simple light alert—check it out!
          </div>
          <div class="alert alert-dark mg-b-0" role="alert">
            A simple dark alert—check it out!
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="alert alert-primary" role="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-secondary" role="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-success" role="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-danger" role="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-warning" role="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-info" role="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-light" role="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-dark" role="alert"&gt;...&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Alert Link</h4>
        <p class="mg-b-30">Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>

        <div data-label="Example" class="td-example">
          <div class="alert alert-primary mg-b-0" role="alert">
            A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="alert alert-primary mg-b-0" role="alert"&gt;
  A simple primary alert with &lt;a href="#" class="alert-link"&gt;an example link&lt;/a&gt;.
  Give it a click if you like.
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Additional Content</h4>
        <p class="mg-b-30">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>

        <div data-label="Example" class="td-example">
          <div class="alert alert-success mg-b-0" role="alert">
            <h6 class="alert-heading">Well done!</h6>
            <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
            <hr>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
          </div><!-- alert -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="alert alert-success" role="alert"&gt;
  &lt;h4 class="alert-heading"&gt;Well done!&lt;/h4&gt;
  &lt;p&gt;Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.&lt;/p&gt;
  &lt;hr&gt;
  &lt;p class="mb-0"&gt;Whenever you need to, be sure to use margin utilities to keep things nice and tidy.&lt;/p&gt;
&lt;/div&gt;</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Dismissing</h4>
        <p class="mg-b-30">Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Add a dismiss button and the <code>.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code>.close</code> button.</p>
        <div data-label="Example" class="td-example">
          <div class="alert alert-warning alert-dismissible mg-b-0 fade show" role="alert">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="alert alert-warning alert-dismissible fade show" role="alert"&gt;
  &lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
  &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;
    &lt;span aria-hidden="true"&gt;&times;&lt;/span&gt;
  &lt;/button&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Outline Style</h4>
        <p class="mg-b-30">An outline style variant with a little thicker border and a little thicker font weight with both border and text have the same color. Use one of the four required contextual classes.</p>

        <div data-label="Example" class="td-example">
          <div class="alert alert-outline alert-primary" role="alert">
            An outline primary alert—check it out!
          </div>
          <div class="alert alert-outline alert-secondary" role="alert">
            An outline secondary alert—check it out!
          </div>
          <div class="alert alert-outline alert-success" role="alert">
            An outline success alert—check it out!
          </div>
          <div class="alert alert-outline alert-danger" role="alert">
            An outline danger alert—check it out!
          </div>
          <div class="alert alert-outline alert-warning" role="alert">
            An outline warning alert—check it out!
          </div>
          <div class="alert alert-outline alert-info" role="alert">
            An outline info alert—check it out!
          </div>
          <div class="alert alert-outline alert-light" role="alert">
            An outline light alert—check it out!
          </div>
          <div class="alert alert-outline alert-dark mg-b-0" role="alert">
            An outline dark alert—check it out!
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="alert alert-outline alert-primary" role="alert"&gt;...&lt;/div&gt;</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Solid Background</h4>
        <p class="mg-b-30">A solid background style variant with white text and without border. Use one of the four required contextual classes.</p>

        <div data-label="Example" class="td-example">
          <div class="alert alert-solid alert-primary" role="alert">
            A solid primary alert—check it out!
          </div>
          <div class="alert alert-solid alert-secondary" role="alert">
            A solid secondary alert—check it out!
          </div>
          <div class="alert alert-solid alert-success" role="alert">
            A solid success alert—check it out!
          </div>
          <div class="alert alert-solid alert-danger" role="alert">
            A solid danger alert—check it out!
          </div>
          <div class="alert alert-solid alert-warning" role="alert">
            A solid warning alert—check it out!
          </div>
          <div class="alert alert-solid alert-info" role="alert">
            A solid info alert—check it out!
          </div>
          <div class="alert alert-solid alert-light" role="alert">
            A solid light alert—check it out!
          </div>
          <div class="alert alert-solid alert-dark mg-b-0" role="alert">
            A solid dark alert—check it out!
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="alert alert-solid alert-primary" role="alert"&gt;...&lt;/div&gt;</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section7" class="mg-b-10">Alert With Icon</h4>
        <p class="mg-b-30">Adding icon to different alert variant using additional class of <code>.d-flex</code> and  <code>.align-items-center</code>.</p>

        <div data-label="Example" class="td-example">
          <div class="alert alert-primary d-flex align-items-center" role="alert">
            <i data-feather="alert-circle" class="mg-r-10"></i> A primary alert—check it out!
          </div>
          <div class="alert alert-outline alert-primary d-flex align-items-center" role="alert">
            <i data-feather="alert-circle" class="mg-r-10"></i> A primary alert—check it out!
          </div>
          <div class="alert alert-solid alert-primary d-flex align-items-center mg-b-0" role="alert">
            <i data-feather="alert-circle" class="mg-r-10"></i> A primary alert—check it out!
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class="alert alert-primary d-flex align-items-center" role="alert"&gt;
  &lt;i data-feather="alert-circle" class="mg-r-10">&lt;/i&gt; A primary alert—check it out!
&lt;/div&gt;</code></pre>
            @@include('./footer.html',{})
            <!-- content-footer -->
          </div>
        </div>
      </div><!-- component-content-body -->

      <div class="component-content-sidebar section-nav">
        <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
        <nav id="navSection" class="nav flex-column">
          <a href="#section1" class="nav-link">Default Functionality</a>
          <a href="#section2" class="nav-link">Alert Link</a>
          <a href="#section3" class="nav-link">Additional Content</a>
          <a href="#section4" class="nav-link">Dismissing</a>
          <a href="#section5" class="nav-link">Outline Style</a>
          <a href="#section6" class="nav-link">Solid Background</a>
          <a href="#section7" class="nav-link">Alert With Icon</a>
        </nav>
      </div><!-- component-content-sidebar -->
    </div><!-- component-content -->

  </div><!-- component-wrapper -->

  @@include('./_script.html',{})

  <script>
    $(function(){
        'use strict'
      });
  </script>
</body>

</html>